<template>
    <view class="area">
        <!--    头部搜索框-->
        <view class="area_top">
            <image :src='serverImageUrl("/static/images/index/fanhui.png")' style="width: 20.93rpx;height: 34.88rpx" @click="back"></image>
            <u-search v-model="searchArea" :show-action="false" :placeholder="$t('根据关键字进行搜索')"
                      @search="doSearch"></u-search>
        </view>
        <!--    内容部分-->
        <view class="area_bottom">
            <view class="area_tabs">
                <u-tabs :current="countryCurrent"
                        :is-scroll="false"
                        :list="countryList"
                        active-color="#FF8305"
                        font-size="27.91rpx"
                        @change="change">
                </u-tabs>
            </view>
            <view class="area_bodyTab">
                <view class="area_class">
                    <text class="text1">{{ $t('不限') }}</text>
                    <view class="area_list">
                        <view class="noselect" @click="selectCity('no',0)">
                            {{ $t('不限') }}
                        </view>
                    </view>
                </view>
                <view class="area_class">
                    <text class="text1">{{ $t('热门城市') }}</text>
                    <view class="area_list">
                        <view v-for="(item,index) in hotList" :key="index" :class="[toClassCity(`hot-${index}`)]"
                              @click="selectCity('hot',index)">{{ item[$t('item.city.shortname')] }}
                        </view>
                    </view>
                </view>
                <view class="area_class">
                    <text class="text1">{{ $t('口岸城市') }}</text>
                    <view class="area_list">
                        <view v-for="(item,index) in portList" :key="index" :class="[toClassCity(`port-${index}`)]"
                              @click="selectCity('port',index)">{{ item[$t('item.city.shortname')] }}
                        </view>
                    </view>
                </view>
            </view>
            <view class="area_cityCel">
                <u-cell-group :border="false">
                    <u-cell-item v-for="(item,index) in cityList" :key="index"
                                 :arrow="false"
                                 :border-top="false"
                                 :title="item[$t('item.city.shortname')]"
                                 :title-style="cityCurrent === 'list-'+index ? titleSelectedStyle : titleStyle"
                                 class="test"
                                 hover-class="none"
                                 @click="selectCity('list',index)">
                        <text style="color:#FF8305 ">{{ cityCurrent === 'list-' + index ? '√' : '' }}</text>
                    </u-cell-item>
                </u-cell-group>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            searchArea: '', //地区搜索
            countryList: [{
                name: '中国',
                value: '0'
            }, {
                name: '俄罗斯',
                value: '1'
            }],
            cityCurrent: '',
            countryCurrent: 0,
            country: '0',
            hotList: [],
            portList: [],
            cityList: [],
            titleStyle: {
                fontSize: '28rpx',

                fontWeight: '400',
                color: '#1E1E1E',
                lineHeight: '38rpx',
                margin: '17.44rpx 0 17.44rpx 0'
            },
            titleSelectedStyle: {
                fontSize: '28rpx',

                fontWeight: '400',
                color: '#FF8305',
                lineHeight: '38rpx',
                margin: '17.44rpx 0 17.44rpx 0'
            },
            from_type: 'home'
        };
    },
    onLoad(options) {
        // from_type = 来源页面路径
        // ['home'='首页']，首页存缓存
        if (options.from_type) {
            this.from_type = options.from_type
        }
        this.getAreaData()
    },
    methods: {
        getAreaData() {
            const that = this
            this.$u.api.basic.getAreaDatas({
                country: that.country,
                search: '',
                type: 'list',
                page: 1,
                limit: 2000,
            }).then(res => {
                console.log('area-res', res)
                that.hotList = res.hot
                that.portList = res.port
                that.cityList = res.list
            }).catch(err => {
                console.log(err);
            })
        },
        change(index) {
            this.countryCurrent = index;
            this.country = this.countryList[index].value;
            this.getAreaData()
        },
        selectCity(type, value) {
            this.cityCurrent = type + '-' + value
            let areaData = [];
            if (type === 'no') {
                areaData = {shortname: '不限'}
            } else if (type === 'hot') {
                areaData = this.hotList[value]
            } else if (type === 'port') {
                areaData = this.portList[value]
            } else {
                areaData = this.cityList[value]
            }
            console.log("当前选中的城市为：", areaData)
            const that = this
            // 首页城市存缓存
            if (this.from_type === 'home') {
                uni.setStorage({
                    key: that.from_type + '_city',
                    data: areaData,
                    success: function () {
                        setTimeout(() => {
                            that.$u.route({
                                type: "navigateBack"
                            })
                        }, 500)
                    }
                });
            } else {
                // 非首页回参
                setTimeout(() => {
                    that.$u.route({
                        type: "navigateBack",
                        params: {
                            city: areaData
                        }
                    })
                }, 500)
            }
        },
        back() {
            this.$u.route({
                type: "navigateBack"
            })
        },
        doSearch() {
            const that = this
            let searchData = this.searchArea
            this.$u.api.basic.getAreaDatas({
                country: that.country,
                search: searchData,
                type: 'list',
                page: 1,
                limit: 2000,
            }).then(res => {
                console.log('area-res', res)
                that.hotList = res.hot
                that.portList = res.port
                that.cityList = res.list
            }).catch(err => {
                console.log(err);
            })
        }
    },
    computed: {
        toClassCity() {
            return (value) => {
                return this.cityCurrent === value ? 'select' : 'noselect'
            }
        },
    }
}
</script>

<style lang="scss">
.area {
    height: 100vh;
    display: flex;
    flex-direction: column;

    .area_top {
        margin-top: 87.21rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding-right: 29.65rpx;
        margin-bottom: 43.6rpx;

        image {
            margin: 11.2rpx 33.14rpx 11.2rpx 31.4rpx;
        }
    }

    .area_bottom {
        display: flex;
        flex-direction: column;

        .area_tabs {
            border-bottom: 2rpx solid #E5E5E5;
        }

        .area_bodyTab {
            display: flex;
            flex-direction: column;

            .area_class {
                margin-top: 36.63rpx;

                .text1 {
                    font-size: 24rpx;
                    font-weight: 500;
                    color: #1E1E1E;
                    line-height: 35rpx;
                    margin: 29.65rpx;
                }

                .area_list {
                    display: flex;
                    flex-wrap: wrap;
                    grid-template-columns: repeat(4, 130rpx);
                    justify-content: left;

                    view {
                        //cursor: pointer;
                        //width: 130rpx;
                        height: 51rpx;
                        border-radius: 9rpx;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin-top: 20rpx;
                        padding: 10rpx;
                        margin-left: 20rpx;

                        background-color: $my-bgColorFFFFFF;
                    }
                }

            }

        }

        .area_cityCel {
            margin: 97.67rpx 34.88rpx 0 34.88rpx;
        }
    }
}

.noselect {
    border: 2rpx solid #CFCFCF;
    color: $my-bgColor1E1E1E;
}

.select {
    color: $my-bgColorFFFFFF;
    background: linear-gradient(134deg, #DD2910 0%, #FEB730 100%);
}
</style>
